﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../themes/icon.css" rel="stylesheet" />
    <script src="../jquery-easyui-1.4.3/jquery.min.js"></script>
    <script src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <meta charset="utf-8" />
</head>
<body>
    <div id="tbar">
        <div style="background-color:antiquewhite">
            <a id="btnadd">新增</a>
            <a id="btnupdate">修改</a>
            <a id="btndelete">删除</a>
            <a id="btnallocation">分配管理员</a>
        </div>
        <div style="background-color:antiquewhite">
            <label id="lblshopname" style="font-size:14px">店铺名称：</label><input type="text" name="txtshopname" size="10" />
            <label id="lbllinkman" style="font-size:14px">联系人：</label><input type="text" name="txtlinkman" size="10" />
            <label id="lbladdress" style="font-size:14px">店铺地址：</label><input type="text" name="txtaddress" size="10" />
            <a id="btnselect">查询</a>
        </div>
    </div>
    <table id="shoptable"></table>
    <div>
        <div id="editshop" data-options="iconCls:'icon-save',resizable:true,modal:true" style=" overflow:hidden">
            <iframe id="ifshop" width="100%" height="100%" frameborder="0" scrolling="no" style="overflow:hidden"></iframe>
        </div>
    </div>
</body>
</html>
<script>
    $(function () {
        //店铺信息表格
        $('#shoptable').datagrid({
            fitColumns: true,//自动展开收缩页，
            pagination: true,//分页效果
            // pageSize:10,
            singleSelect: true,//单选效果
            rownumbers: true,//
            url: '/Shops/datagrid_data1.json',
            method: 'get',
            columns: [[
                { field: 'shopid', title: '店铺编号', width: 100 },
                { field: 'shopname', title: '店铺名称', width: 200 },
                { field: 'shopstyle', title: '店铺类型', width: 100 },
                { field: 'linkman', title: '联系人', width: 100 },
                { field: 'linkmantel', title: '联系人电话', width: 100 },
                { field: 'shopadd', title: '地址', width: 200 }
            ]]
        });
        //添加按钮
        $('#btnadd').linkbutton({
            iconCls: 'icon-add'
        })
        //点击添加按钮弹出页面
        $("#btnadd").click(function () {
            $("#editshop").dialog({
                title: '新增店铺',
                width: 500,
                height: 240
            }).dialog("open")
            $("#ifshop").attr("src", "../Shops/AddShops.html")
        })
        //修改按钮
        $('#btnupdate').linkbutton({
            iconCls: 'icon-edit'
        })
        //点击修改按钮弹出对话框
        $("#btnupdate").click(function () {
            //获取选中行的行数是否为空
            var rowcount = $("#shoptable").datagrid("getSelected");
            //不为空，显示对话框
            if (rowcount != null) {
                $("#editshop").dialog({ title: '修改店铺', width: 500, height: 240 }).dialog("open")
                $("#ifshop").attr("src", "../Shops/UpdateShops.html")
            }
                //为空提示对话框
            else {
                $.messager.alert("提示", "请先选中您要修改的行！", "warning")
            }
        })
        //删除按钮
        $("#btndelete").linkbutton({
            iconCls: 'icon-remove'
        })
        $("#btndelete").click(function () {
            var rowcount = $("#shoptable").datagrid("getSelected");
            if (rowcount != null) {
                $.messager.confirm("提示", "你确定要删除吗？")
            }
            else {
                $.messager.alert("温馨提示", "请先选中您要删除的行！", "warning")
            }
        })
        //分配按钮
        $("#btnallocation").linkbutton({
            iconCls: 'icon-ok'
        })
        $("#btnallocation").click(function () {
            var rowcount = $("#shoptable").datagrid("getSelected");
            if (rowcount != null) {
                $("#editshop").dialog({
                    title: "分配管理员",
                    height: 200, width: 300
                }).dialog("open")
                $("#ifshop").attr("src", "../Shops/AllocationAdmin.html")
            }
            else {
                $.messager.alert("温馨提示", "请先选中您要分配的行！", "warning")
            }
        })
        //查询按钮
        $("#btnselect").linkbutton({
            iconCls: 'icon-search'
        })
    });
</script>
